<template>
	<el-upload v-loading="loading" class="avatar-uploader" :action="''" list-type="picture-card" :auto-upload="false" :show-file-list="false"
		:headers="{ 'Content-Type': 'image/jpeg' }" :on-change="handleAvatarChangeIcon">
		<img v-if="imageUrl" :src="imageUrl" class="avatar" fit="fill" />
		<el-icon v-if="!imageUrl">
			<Plus />
		</el-icon>
	</el-upload>
</template>

<script lang='ts' setup>
import { uploadContentImage } from '@/api/system/user';
import { ElMessage, UploadProps } from 'element-plus';
import { ref } from 'vue';
let dialogImageUrl = ref('');
let loading = ref(false);
const Emits = defineEmits(['imageTouch']);
const props = defineProps(['imageUrl']);

function handleAvatarChangeIcon(file: any, fileList: any) {//选中文件触发的change事件
	console.log(file);
	const isJPG = file.raw.type === 'image/jpeg';
	const isPNG = file.raw.type === 'image/png';
	// const isLt2M = file.raw.size / 1024 / 1024 < 0.5  //限制上传文件的大小
	if (!isPNG && !isJPG) {
		ElMessage.error('上传图片只能是 JPG/PNG 格式!');
		return false;
	} else {
		// imageUrl.value = URL.createObjectURL(file.raw);//赋值图片的url，用于图片回显功能
		uploadImg(file);//调用上传文件api接口
	}
}
function uploadImg(file: any) {//文件上传操作
	loading.value = true;
	let formData = new FormData();
	formData.append('file', file.raw);
	formData.append('fileName', file.name.toLowerCase());
	uploadContentImage(formData).then((res: any) => {
		loading.value = false;
		if (res.code == '200') {
			ElMessage.success('图片上传成功');
			// imageUrl.value = res.data.filePath;
			Emits('imageTouch', res.data.filePath);
		}
	});
}

</script>
<style scoped lang='scss'>
.avatar {
	width: 99%;
	height: 99%;
	border-radius: 10px;
}
</style>